<template>
  <div>
    <el-card>
      <el-row>
        <el-col align="right">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="">
              <el-input clearable v-model="searchname" @input="call" placeholder="请输入职位名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="['Admin','Sadmin']" @click="search" icon="el-icon-search" type="primary">
                查询
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-permission="['Admin','Sadmin']" @click="adds"
                         icon="el-icon-circle-plus-outline"
                         type="success">
                新增职位
              </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-table
          border
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="companyName"
            label="公司名"
            align="center">
        </el-table-column>
        <el-table-column
            prop="departmentName"
            align="center"
            label="部门名">
        </el-table-column>
        <el-table-column
            prop="name"
            label="职位名称"
            align="center">
        </el-table-column>
        <el-table-column
            prop="keyword"
            align="center"
            label="所属权限">
        </el-table-column>
        <el-table-column
            align="center"
            label="操作">
          <template slot-scope="{ row }">
            <el-button v-permission="['Admin','Sadmin']" @click="bianji(row)" type="primary" size="mini">
              编辑
            </el-button>
            <el-button v-permission="['Admin','Sadmin']" @click="del(row.id)" type="danger" size="mini">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 15px">
        <el-col align="right">
          <el-pagination
              @current-change="handleSizeChange"
              :current-page.sync="page"
              :page-size="10"
              background
              layout="total, prev, pager, next,jumper"
              :total="total">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog @close="close" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
            label="所属公司"
            prop="companyId"
            label-width="100px">
          <el-select
              v-if="!disabled"
              ref="select"
              @change="changeCompany"
              v-model="form.companyId"
              placeholder="请选择">
            <el-option
                v-for="item in company"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <el-input v-else disabled v-model="companyNames"></el-input>
        </el-form-item>
        <el-form-item
            label="所属部门"
            prop="departmentId"
            label-width="100px">
          <el-select @change="departChange"
                     v-model="form.departmentId"
                     placeholder="请选择">
            <el-option
                v-for="item in depart"
                :key="item.id"
                :label="item.departmentName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职位名称" prop="name" label-width="100px">
          <el-input v-model="form.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="所属权限" prop="keyword" label-width="100px">
          <el-select @change="getJobKeyword"
                     v-model="form.keyword"
                     placeholder="请选择">
            <el-option
                v-for="(item) in keywords"
                :key="item.name"
                :label="item.name"
                :value="item.keyword">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox @change="isMore" v-model="checked">是否只允许一人担任</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {zhiwei, addzhiwei, modifyzhiwei, delzhiwei, getCompanyView, getDepartView, companyAll} from "../../api";
import {deepClone} from "../../uilts";
import {getJobKeyword} from "../../api/user";

const getdefaultform = () => ({
  "keyword": "",
  "name": "",
  "companyId": "",
  "departId": "",
  departmentId: '',
  companyName: '',
  departmentName: '',
  isRepeat: ""
})
const xy = () => ([{
  required: true,
  message: "请输入完整的信息！！！"
}])
export default {
  data() {
    return {
      list: [],
      dialogFormVisible: false,
      form: getdefaultform(),
      company: [],//所属公司
      depart: [],//部门数组
      job: [],//职位
      keywords: [],
      companyNames: '',
      disabled: false,
      rules: {
        keyword: xy(),
        name: xy(),
        companyId: xy(),
        departmentId: xy(),
      },
      isbianji: false,
      total: 0,
      page: 1,
      searchname: "",
      checked: false
    }
  },
  created() {
    this.getList()
    // this.companyAll()
    this.getJobKeyword()
  },
  methods: {
    //判断是否只能由一人担任该次添加的职位
    isMore(aa) {
      if (aa === false) {
        this.form.isRepeat = 2
        console.log(this.form.isRepeat)
      } else {
        this.form.isRepeat = 1
        console.log(this.form.isRepeat)
      }
      aa = !aa
    },
    async search() {
      this.page = 1
      await this.getList()
    },
    async handleSizeChange(p) {
      this.page = p
      await this.getList()
    },
    async getList() {
      const res = await zhiwei({
        limit: 9,
        name: this.searchname,
        page: this.page
      })
      this.list = res.data.data.list
      this.total = res.data.data.total
      this.page = res.data.data.pageNum
    },
    //获取分公司
    async companyAll() {
      const res = await companyAll({
        limit: 1000
      })
      // console.log(res.data.data)
      this.company = res.data.data
    },
    //获取职位权限
    async getJobKeyword() {
      const key = await getJobKeyword()
      this.keywords = key.data.data
    },
    call() {
      if (this.searchname === '') {
        this.getList()
      }
    },
    //翻页
    currentChange(pagee) {
      this.page = pagee
      this.getList()
    },
    //修改
    bianji(row) {
      const aa = this.$store.state.userinfo.data.data.keyword
      if (aa === 'Admin') {
        this.companyAll()
      } else {
        this.disabled = true
        this.companyNames = this.$store.state.userinfo.data.data.companyName
        this.form.companyId = this.$store.state.userinfo.data.data.companyId
      }
      console.log(this.$store.state.userinfo)
      this.changeCompany(row.companyId)
      console.log(row)
      this.isbianji = false
      this.dialogFormVisible = true
      this.form = deepClone(row)
    },
    //新增
    adds() {
      this.dialogFormVisible = true
      this.isbianji = true
      const aa = this.$store.state.userinfo.data.data.keyword
      console.log(this.$store.state.userinfo.data.data)
      this.changeCompany(this.$store.state.userinfo.data.data.companyId)
      if (aa === 'Admin') {
        this.companyAll()
      } else {
        this.disabled = true
        this.companyNames = this.$store.state.userinfo.data.data.companyName
        this.form.companyId = this.$store.state.userinfo.data.data.companyId
      }
    },
    submit() {
      this.changeCompany(this.$store.state.userinfo.data.data.companyId)
      this.$refs.form.validate(async (res) => {
        if (res) {
          if (this.isbianji) await addzhiwei(this.form)
          else await modifyzhiwei(this.form)
          this.$message.success('操作成功！')
          this.dialogFormVisible = false
          await this.getList()
        }
      })
    },
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delzhiwei(id)
        this.$message.success('删除成功！！！')
        await this.getList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //关闭弹窗后清空
    close() {
      this.form = getdefaultform()
      this.$refs.form.resetFields()
    },
    //选择公司后请求该公司下部门信息
    async changeCompany(n) {
      this.form.departId = ''
      this.form.jobId = ''
      const dp = await getCompanyView(n)
      this.depart = dp.data.data
      console.log(this.depart)
    },
    async departChange(n) {
      this.form.jobId = ''
      const v = await getDepartView(n)
      this.job = v.data.data
    }
  }
}
</script>

<style scoped>
>>>.el-form-item__content{
  margin-left: 25px;
}
</style>
